<html> 
  <head> 
    <title>html shader</title> 
    <script type="text/javascript" src="../jquery.js"></script>
    <script type="text/javascript" src="../math/point2d.js"></script>
    <script type="text/javascript" src="../math/vector2d.js"></script>
    <script id="shader-fs" type="x-shader/x-fragment">
        #ifdef GL_ES
        presision highp float;
        #endif
        
        void main(void) {
            gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
        }
    </script>
    <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec3 Pos;
        uniform mat4 uMV;
        uniform mat4 uPM;
        void main(void) {
            gl_Position = uPM * uMV * vec4(Pos, 1.0);
        }
    </script>
    <script type="text/javascript">
        
        var gl;
        var shaderProgram;
        function initGL( canvas) {
            try {
                gl = canvas.getContext( "experimental-webgl");
                gl.viewportWidth = canvas.width;
                gl.viewportHeight = canvas.height;
            }catch ( e) {
                gl = null;
            }
            
            if ( gl == null)
                console.error( "get gl context failed.");
        }
        
        function getShader( gl, id) {
            var shaderScript = $("#"+id);
            if ( shaderScript.length < 1)
                return null;
                           
            var shader = null;
            var scriptType = shaderScript.attr( "type");
            if ( scriptType == "x-shader/x-fragment")
                shader = gl.createShader( gl.FRAGEMENT_SHADER);
            else if ( scriptType =="x-shader/x-vertex")
                shader = gl.createShader( gl.VERTEX_SHADER);
            
            if ( shader == null)
                return null;
            
            var src = $.text( shaderScript); //shaderScript.text();
            gl.shaderSource( shader, src);
            gl.compileShader( shader);
            
            if ( !gl.getShaderParameter( shader, gl.COMPILE_STATUS)) {
                console.log( gl.getShaderInfoLog( shader));
                return null;
            }
            
            return shader;
        }
        
        function initShaders() {
            var vShader = getShader( gl, "shader-vs");
    		var fShader = getShader( gl, "shader-fs");
    		shaderProgram = gl.createProgram();
    		gl.attachShader( shaderProgram, vShader);
    		gl.attachShader( shaderProgram, fShader);
    		gl.linkProgram( shaderProgram);
    		
    		if ( !gl.getProgramParameter( shaderProgram, gl.LINK_STATUS)) {
    		    console.log( "Could not initialise shaders");
    		    return null;
    		}
    		
    		gl.useProgram( shaderProgram);
    		shaderProgram.vertexPositionAttribute = gl.getAttribLocation( shaderProgram, "Pos");
    		gl.enableVertexAttribArray( shaderProgram.vertexPositionAttribute);
    		
    		shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPM");
            shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMV");
            
            return shaderProgram;
        }
       

        function onTimer() {
            gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    	}
    	
     	$(document).ready( function() {
     	    var cancas = $("#myCanvas")[0];
    		if ( !cancas || !cancas.getContext)
    			return;

    		initGL( cancas);
    		initShaders(); 
    		
    		gl.clearColor( 0.0, 0.0, 0.0, 1.0);
    		gl.enable( gl.DEPTH_TEST);   		
    		
    		setInterval( "onTimer()", 33);

    		
    	});
		</script> 
  </head> 
  <body> 
    <canvas id="myCanvas" width="800" height="600">
    	Your browser does not have support for Canvas.
    </canvas>
  </body> 
</html> 